<template>
  <div class="cart-main">
    <ShopCart
      :column="column"
      :top-css="{
        background: '#f5f8fe',
        height: '.2969rem',
      }"
      ref="shopCartRef"
      :factory-data="shopCartData"
      :platformCustomer="[
        {
          customer_id: 1,
          customer_name: '平台客服一',
          customer_phone: '17325764719',
        },
        {
          customer_id: 2,
          customer_name: '平台客服二',
          customer_phone: '13580871559',
          qrcode: '/images/qrcode.png',
        },
        {
          customer_id: 3,
          customer_name: '平台客服三',
          customer_phone: '12567871443',
          qrcode: '/images/qrcode.png',
        },
      ]"
      multiple
    >
      <template #subtotal="{ row }">
        {{ row.total * row.price }}
      </template>
      <template #goods="{ row }">
        <div class="goods">
          <div class="goods-img"><img v-lazy="publicUrl(row.img)" /></div>

          <div class="goods-right">
            <div class="title overTwo">{{ row.goods_name }}</div>
            <div class="bottom">单号:{{ row.order_no }}</div>
          </div>
        </div>
      </template>

      <template #total="{ row }">
        <div class="counter">
          <Counter
            :step="1"
            :min="1"
            :max="row.purchase"
            v-model:value="row.total"
          />
          <div class="errorMsg" v-show="row.purchase !== undefined">
            限购{{ row.purchase }}件
          </div>
        </div>
      </template>
      <template #operation="{ row, itemKey, orderType, orderItemKey }">
        <div class="operation">
          <router-link
            :to="`/mtm/index/make`"
            class="edit thumb"
            v-show="orderType === 'diy'"
            >编辑</router-link
          >
          <Popconfirm
            :placement="'bottom'"
            :title="`确定要删除吗`"
            :loading="row.deleteLoading"
            @confirm="
              (close) => delOrder(itemKey, orderType, orderItemKey, row, close)
            "
          >
            <span class="delText">删除</span>
          </Popconfirm>
        </div>
      </template>
    </ShopCart>

    <div class="coupon-bottom">
      <span>平台优惠券</span>
      <div class="coupon">
        <Select
          placeholder="请选择优惠券"
          :options="platformCoupon"
          :searchable="false"
          label="coupon_name"
          :reduce="(option:Coupon) => option.coupon_id"
          :clearable="true"
          v-model:value="couponValue"
        />
      </div>
    </div>

    <div class="bottom-cart">
      <div class="left">
        <div class="checkbox" @click="() => shopCartRef?.changeCheckAll()">
          <img
            v-show="shopCartRef?.isCheckAll"
            :src="publicUrl(`/images/checkbox.png`)"
          />
        </div>
        <div class="all">全选</div>
        <div class="text" @click="deleteGoods">删除</div>
        <div class="text" @click="moveIn">移入收藏夹</div>
      </div>
      <div class="right">
        <div class="medium">
          已选商品<span class="red">{{ cartData.goods_num }}</span
          >件
        </div>
        <div class="medium">
          合计（不含运费）：<span class="red"
            >￥{{ twoFixed(cartData.lastPrice) }}</span
          >
        </div>
        <div class="button thumb" @click="settlement">结算</div>
      </div>
    </div>
  </div>
  <Confirm
    :title="`确定要删除这些商品?`"
    v-model:show="showConfirm"
    @confirm="() => shopCartRef?.batchDelOrder()"
  >
  </Confirm>
</template>
<script setup lang="ts" name="">
import { ref, computed } from "vue";
import ShopCart, {
  Column,
  Factory,
  OrderShow,
  CartChecked,
} from "@/components/ShopCart";
import Counter from "@/components/Counter/index.vue";
import shopCartJson from "@/json/shopCart.json";
import Popconfirm from "@/components/Popconfirm/index.vue";
import { toast } from "vue3-toastify";
import { publicUrl, twoFixed, copyObj } from "@/utils/util";

import Select from "@/components/Select/index.vue";
import { useRouter } from "vue-router";
import Confirm from "@/components/Confirm/index.vue";

interface Coupon {
  coupon_id: number;
  coupon_name: string;
  coupon_discount: number;
}

const shopCartData = ref<Array<Factory<OrderShow>>>(shopCartJson);
const shopCartRef = ref<InstanceType<typeof ShopCart>>();
const couponValue = ref<number | undefined>(undefined);
const router = useRouter();
const showConfirm = ref<boolean>(false);

const cartData = computed((): CartChecked => {
  let cartCheckeds = shopCartRef.value?.cartChecked;
  if (!cartCheckeds)    //
    return {
      goods_num: 0, //所选的商品数量
      totalPrice: 0, //所选的商品总价钱
      discount: 0, //优惠的价格
      lastPrice: 0, //最后的价格
    };  

  let cartChecked = copyObj(cartCheckeds);
  /* 平台优惠券*/
  let coupon = platformCoupon.value.find(
    (item: Coupon) => couponValue.value === item.coupon_id
  );

  if (coupon) {
    cartChecked.discount += coupon.coupon_discount;
    cartChecked.lastPrice -= coupon.coupon_discount;
  }
  /* */

  cartChecked.lastPrice = cartChecked.lastPrice > 0 ? cartChecked.lastPrice : 0;

  return cartChecked;
});
const platformCoupon = ref<Array<Coupon>>([
  {
    coupon_id: 1,
    coupon_name: "优惠300",
    coupon_discount: 300,
  },
  {
    coupon_id: 2,
    coupon_name: "优惠500",
    coupon_discount: 500,
  },
]);

const column = ref<Array<Column>>([
  {
    title: "品类信息",
    slotName: "goods",
    width: 500,
  },
  {
    title: "面料信息/规格",
    dataKey: "spec",
    tdAlign: "center",
    width: 150,
  },
  {
    title: "单价",
    dataKey: "price",
    tdAlign: "center",

    width: 150,
  },
  {
    title: "数量",
    dataKey: "total",
    slotName: "total",
    tdAlign: "center",
    width: 150,
  },
  {
    title: "小计",
    tdAlign: "center",
    slotName: "subtotal",
    width: 150,
  },
  {
    title: "操作",
    tdAlign: "center",
    slotName: "operation",
    width: 120,
  },
]);

const delOrder = (
  itemKey: number,
  orderType: "diy" | "spot" | "fabric",
  orderItemKey: number,
  row: OrderShow,
  close: any
) => {
  // if (shopCartData.value[itemKey].order[orderType]) {
  row.deleteLoading = true;
  setTimeout(() => {
    toast.success(`删除成功`);
    close();
    shopCartRef.value?.delOrder(itemKey, orderType, orderItemKey);
    let bool = shopCartRef.value?.checkFactoryHaveOrder(itemKey);
    bool
      ? shopCartRef.value?.resetFactory(itemKey)
      : shopCartRef.value?.delFactory(itemKey); //有单的情况下重置工厂勾选情况 没有则删除工厂
  }, 2000);
  // }
};

const deleteGoods = () => {
  let checkedArr = shopCartRef.value?.getOrderChecked();
  if (!checkedArr || checkedArr.length == 0) {
    toast.warning(`请选择要删除的商品`);
    return;
  } else {
    // shopCartRef.value?.batchDelOrder(checkedArr);
    showConfirm.value = true;
  }
};

const moveIn = () => {
  let checkedArr = shopCartRef.value?.getOrderChecked();
  if (!checkedArr || checkedArr.length == 0) {
    toast.warning(`请选择要移入的订单商品`);
    return;
  } else {
    toast.success(`移入成功`);
  }
};

const settlement = () => {
  let checkedArr = shopCartRef.value?.getOrderChecked();
  if (!checkedArr || checkedArr.length == 0) {
    toast.warning(`还未选择结算的商品`);
    return;
  } else {
    router.push(`/order/index`);
  }
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
